﻿<template>
  <div v-show="isShow">
    <el-row
      :gutter="10"
      v-if="showLabel"
      type="flex">
      <el-col :span="lspan" style="padding-top:5px" :class="isRequired ? 'isRequired' : ''">{{ label }}:</el-col>
      <el-col :span="contentSpan">
        <slot> 默认内容 </slot>
        <label v-if="showErrMsg" class="error">{{errMsg}}</label>
      </el-col>
    </el-row>
    <template v-else class="no-label">
      <label class="required" v-if="isRequired">*</label>
      <slot></slot>
      <label v-if="showErrMsg" class="error">{{errMsg}}</label>
    </template>
  </div>
</template>
<script>
export default {
  props: ['isShow', 'label', 'showLabel', 'labelSpan', 'isRequired', 'showErrMsg', 'errMsg', 'commonConfig'],
  data () {
    return {
      lspan: this.labelSpan ? this.labelSpan : 4,
      contentSpan: this.labelSpan ? 24 - parseInt(this.labelSpan) : 20
    }
  },
  watch: {
    labelSpan: {
      handler: function (val, oldVal) {
        this.lspan = val
        this.contentSpan = 24 - parseInt(this.labelSpan)
      },
      deep: true
    }
  }
}
</script>
<style>
.isRequired:before {
  content: "*" !important;
  color: #f56c6c !important;
  margin-right: 4px !important;
  margin-top: 4px;
}
.required {
  color: #f56c6c !important;
  margin-right: 4px !important;
  margin-top: 4px;
}
.no-label {
  width: 100%;
  display: flex;
  display: -webkit-flex;
}
.error {
  color: #f56c6c !important;
}
</style>
